<template>
  <div>
    <el-dialog
      :title="dialogtitle"
      width="1000px"
      class="icon-dialog"
      :visible.sync="show"
      :before-close="closeForm"
      append-to-body
      @open="open"
    >
      <el-form
        ref="form"
        :size="size"
        :label-width="$store.getters.device !== 'mobile' ? '16%' : '90px'"
      >
        <el-tabs v-model="nowDay">
          <el-tab-pane
            v-for="(item, index) in timeList"
            :label="item.date + '(' + item.dayOfWeek + '}'"
            :name="item.date"
            :key="index"
          >
            <div class="time-wrap" style="display: flex; flex-wrap: wrap">
              <div
                :style="getStyle(items)"
                style="
                  border: 1px solid #eee;
                  padding: 25px;
                  text-align: center;
                  margin: 10px;
                  border-radius: 6px;
                  cursor: pointer;
                "
                v-for="(items, indexs) in info.data"
                :key="indexs"
                @click="handleClick(items)"
                class="time-item"
              >
                {{ items.beginTime }} - {{ items.endTime }}
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="loading" type="primary" @click="submit">
          <span v-if="!loading">确 定</span>
          <span v-else>提 交 中...</span>
        </el-button>
        <el-button @click="closeForm">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "Serviceadd",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    opentype: {
      type: String,
      default: "add",
    },
    size: {
      type: String,
      default: "small",
    },
    info: {
      type: Array / Object,
    },
  },
  data() {
    return {
      dialogtitle: "变更服务时间",
      loading: false,
      nowDay: "",
      timeList: [],
    };
  },
  created() {},
  methods: {
    getStyle(item) {
      if (item.pass && this.nowDay == this.timeList[0].date) {
        return "background-color: #eee;";
      }
      if (this.info.yue_time === "未预约时间") {
        return;
      }
      const time = this.formatTimeRange(this.info.yue_time);
      if (
        this.nowDay == time[0] &&
        item.beginTime == time[1] &&
        item.endTime == time[2]
      ) {
        return "color:red;border-color:red";
      } else {
        return "border-color:#eee";
      }
    },
    formatTimeRange(timeRange) {
      const parts = timeRange.split(" "); // 拆分日期和时间段
      const date = parts[0]; // 日期部分

      const time = parts[1] + parts[2] + parts[3]; // 时间段部分

      // 分隔时间段的开始时间和结束时间
      const [startTime, endTime] = time.split("到");

      return [date, startTime, endTime];
    },
    handleClick(items) {
      if (items.pass && this.nowDay == this.timeList[0].date) {
        return;
      }
      this.info.yue_time =
        this.nowDay + " " + items.beginTime + " 到 " + items.endTime;
    },
    open() {
      this.timeList = this.getWeekDates();
      this.nowDay = this.timeList[0].date;
      const now = new Date();
      const hour = now.getHours();
      const minute = now.getMinutes();
      let curentTime = `${hour > 9 ? hour : "0" + hour}:${
        minute > 9 ? minute : "0" + minute
      }`;
      this.info.data.map((item, index) => {
        if (item.beginTime <= curentTime) {
          item.pass = true;
        } else {
          item.pass = false;
        }
        return item;
      });
    },
    getWeekDates() {
      const today = new Date(); // 获取当前日期
      const weekDates = []; // 存储七天日期的数组

      for (let i = 0; i <= 6; i++) {
        const nextDate = new Date(today.getTime() + i * 24 * 60 * 60 * 1000);
        const nextYear = nextDate.getFullYear();
        const nextMonth = String(nextDate.getMonth() + 1).padStart(2, "0");
        const nextDay = String(nextDate.getDate()).padStart(2, "0");

        let dayOfWeek;
        if (i === 0) {
          dayOfWeek = "今天";
        } else if (i === 1) {
          dayOfWeek = "明天";
        } else if (i === 2) {
          dayOfWeek = "后天";
        } else {
          dayOfWeek = this.getDayOfWeek(nextDate.getDay());
        }

        weekDates.push({
          date: `${nextYear}-${nextMonth}-${nextDay}`,
          dayOfWeek: dayOfWeek,
        });
      }

      return weekDates;
    },

    // 获取星期几（0-6 对应周日到周六）
    getDayOfWeek(day) {
      const daysOfWeek = [
        "周日",
        "周一",
        "周二",
        "周三",
        "周四",
        "周五",
        "周六",
      ];
      return daysOfWeek[day];
    },
    closeForm() {
      this.$emit("update:show", false);
      this.loading = false;
      if (this.$refs["form"] !== undefined) {
        this.$refs["form"].resetFields();
      }
    },
    submit() {
      this.loading = true;
      this.$api
        .post("/order/updateTime", {
          id: this.info.id,
          yue_time: this.info.yue_time,
        })
        .then((res) => {
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.$emit("refesh_list");
          this.closeForm();
        });
    },
  },
};
</script>
<style scoped>
.ordergoodsbox {
  width: 100%;
  padding-bottom: 10px;
  float: left;
}

.goods_pic {
  width: 100px;
  vertical-align: middle;
  float: left;
}

.ordergoodstext {
  padding: 10px;
  float: left;
}
</style>
